<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>后台管理</title>
    <#include "/admin/include/bootstrap.ftl">
    <!--<script src="${webroot}/www/echarts/echarts.min.js"></script>-->
    <script src="//cdn.bootcss.com/echarts/3.4.0/echarts.min.js"></script>
    <script src="${webroot}/www/admin/js/controlPanel.js"></script>
    <script src="${webroot}/www/blog/js/pub/blog-alert.js"></script>
    <script src="http://echarts.baidu.com/asset/theme/roma.js"></script>
        <style>

            .indexbox{
                /*height:20%;
                width:100%;
                margin-top:20px;*/
                padding-left: 10px;
            }
            .indexbox i{font-size: 30px;}
            .oneBox{
                margin-top: 0px;
                float: left;
                background: #996699;
                width: 45%;
                height: 120px;
                /*margin-left: 30px;*/
                font-size:16px;
                box-shadow: 0px 0px 4px #868282;

            }
            .twoBox{
                background:#7e53c6;
                margin-top: 0px;
                float: left;
                width: 45%;
                height: 120px;
                margin-left: 15px;
                box-shadow: 0px 0px 4px #868282;
            }
            .threeBox{
                background:#99CC99;
                margin-top: 15px;
                float: left;
                width: 45%;
                height: 120px;
                box-shadow: 0px 0px 4px #868282;
                /*margin-left: 30px;*/
            }
            .foruBox{
                background:#9999CC;
                margin-top: 15px;
                float: left;
                width: 45%;
                height: 120px;
                margin-left: 15px;
                box-shadow: 0px 0px 4px #868282;
            }
            .imagebox{
                margin-top:35px;
                margin-left:30px;
                margin-bottom:50px;
                float:left;
                color:white;
            }
            .fontbox{
                margin-top:30px;
                float:right;
                margin-right:20px;
                color:white;
                font-size:16px;
                text-align:center;

            }

        </style>
    </head>
<body>
<!-- 左边导航 -->
<#include "/admin/include/dashboard-start.ftl">
<div class="row">
    <@WebSiteCountInfo siteid="${AdminWebSite.id}">
    <div class="indexbox">
        <div class="oneBox">
            <div class="imagebox"><i class="glyphicon glyphicon-th-large"></i> </div>
            <div class="fontbox">
                文章总数<br/>
                <span style="font-size:28px;font-weight:bold;">${WebSiteCountInfoVo.WArticleQuantity}</span>

            </div>
        </div>
        <div class="twoBox">
            <div class="imagebox"><i class="glyphicon glyphicon-tags"></i></div>
            <div class="fontbox">
                分类标签<br/>
                <span style="font-size:28px;font-weight:bold;">${WebSiteCountInfoVo.WLableQuantity}</span>

            </div>
        </div>
        <div class="threeBox">
            <div class="imagebox"><i class="glyphicon glyphicon-comment"></i></div>
            <div class="fontbox">
                收到评论<br/>
                <span style="font-size:28px;font-weight:bold;">${WebSiteCountInfoVo.WDiscussQuantity}</span>

            </div>
        </div>
        <div class="foruBox">
            <div class="imagebox"><i class="glyphicon glyphicon-fire"></i></div>
            <div class="fontbox">
                访问人气<br/>
                <span style="font-size:28px;font-weight:bold;">${WebSiteCountInfoVo.WRequestQuantity}</span>

            </div>
        </div>
    </div>
</@WebSiteCountInfo>
</div>
<div class="row" style="margin-top: 20px;">
    <h2 class="center-block" style="text-align: center;">博客访问情况</h2>
    <div id="main" style="height:400px"></div>
</div>
<script>
    blogControlPanel.activePanelByText("仪表盘");
    var echarts;
    var myChart ;
    // 使用// 使用柱状图就加载bar模块，按需加载
    // 基于准备好的dom，初始化echarts图表
    myChart = echarts.init(document.getElementById('main'),'roma');
      myChart.on('click', function (params) {
     if(params.seriesIndex==0){
     console.info(params.name+"|"+params.value);
     }
     });
    var rows=[];
    $.ajax({
        type: "GET",
        url: "${admin_blogprefix}/admin/report/dayHttpReq.do",
        data: {limit:40},
        dataType:'json',
        success: function(result){
            rows=result;
            var title=new Array();
            var quantity=new Array();
            var ip=new Array();
            for(var i=0;i<rows.length;i++){
                title.push(rows[i].days);
                quantity.push(rows[i].total);
                ip.push(rows[i].ip);
            }
            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: ''
                },
                tooltip: {},
                legend: {
                    data:['PV','IP']
                },
                xAxis: {
                    data:title
                },
                yAxis: {},
                series: [{
                    name: 'PV',
                    type: 'bar',
                    data:quantity
                },
                    {
                        name: 'IP',
                        type: 'bar',
                        data:ip
                    }
                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
            myChart.hideLoading();
// 				        myChart.setTheme('infographic');
        }
    });
</script>
    <#include "/admin/include/dashboard-end.ftl">
</body>
</html>